<template>
  <div>
    <el-button type="success" @click="visibility = true">新增</el-button>
<!--    子组件 父组件 不是 子类 父类 是 被调用 调用 -->
    <el-dialog :visible.sync="visibility">
      <el-form
        ref="player"
        class="player"
        :model="player"
        :rules="rules"
        label-position="right"
        label-width="120px"
      >
        <el-form-item prop="usernameFk" label="用户名：">
          <el-input v-model="player.usernameFk"></el-input>
        </el-form-item>

        <el-form-item prop="nickname" label="角色昵称：">
          <el-input v-model="player.nickname"></el-input>
        </el-form-item>
        <el-form-item prop="profession" label="角色职业：">
          <el-select v-model="player.profession">
            <el-option
              v-for="e in professionTypes"
              :key="e.index"
              :label="e.text"
              :value="e.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="goldCoin" label="金币数量：">
          <el-input v-model.number="player.goldCoin"></el-input>
        </el-form-item>
        <el-form-item prop="silverCoin" label="银币数量：">
          <el-input v-model.number="player.silverCoin"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-edit" @click="playerSubmit()"
            >提交
          </el-button>

          <el-button
            type="warning"
            icon="el-icon-remove"
            @click="() => $refs.player.resetFields()"
            >重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
// import New from './components/New.vue';
export default {
  name: "InsertPlayer",
  components: {
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      visibility: false,
      sampleD: "value",
      player: {
        usernameFk: "2016207058",
        nickname: "王五",
        profession: "architect",
        goldCoin: 30,
        silverCoin: 60,

        playerId: 0,
        version: 0,
        playerCode: null,
      },
      /*  rules: {
            username: [
                {required: true,   message: '请输入账号', trigger: 'blur'},
                {pattern: /^\w+$/, message: '请输入字母/数字/下划线', trigger: ['blur','change']},
                { validator:this.validateItem ,trigger:'blur'}
                ],
            password: [
                {required: true, message: '请输入密码', trigger: 'blur'},
                ],
            }
        */
      rules: {
        usernameFk: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            pattern: /^2016\d{6}$/,
            message: "必须是十位数字，2016开始",
            trigger: "blur",
          },
        ],
        nickname: [{ validator: this.validateNickname, trigger: "blur" }],
        goldCoin: [{ validator: this.validateGoldCoin, trigger: "blur" }],
      },

      // professionTypes: [
      //   {
      //     index: 0,
      //     text: "建筑师",
      //     value: "architect",
      //   },
      //   {
      //     index: 1,
      //     text: "会计师",
      //     value: "accountant",
      //   },
      // ],
    };
  },
  computed: {
    //效果应该是和mapstate一样的
    professionTypes(){
      return this.$store.state.professionTypes;
    }
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {
    // this.getProfessionTypes();
  },
  mounted() {},
  methods: {
    sampleM() {},
    playerSubmit() {
      this.$message(JSON.stringify(this.player));
      this.$refs.player.validate((valid) => {
        if (valid) {
          this.$http({
            method: "post",
            url: "/ceto/player/insert",
            data: this.player,
          }).then(
            (res) => {
              if (res.data && res.data.playerId !== 0) {
                this.$message.success("保存成功！");
                this.visibility = false;
                this.$emit("onSubmit",1)

              //  发布订阅 本质是代码调用 传统代码调用 分为 调用端 和被调用端
              //  发布订阅模式三部分 调用端 缓冲区 被调用端
              //                     发布者 消息队列 订阅者
              //                     发动机   co2->queue/list ->co2 植物
              //  关心                发送到哪个queue 发布什么消息
              //                      订阅了哪个queue  收到消息后干什么事情
              //  青岛日报 青岛早报 齐鲁日报


              }
            },
            (error) => {
              this.$message.error("保存失败！");
              console.log(".player request error : " + error.response.status);
            }
          );
        } else {
          this.$message.warning("验证不通过请重新填写表单");
        }
      });
    },
    // getProfessionTypes() {
    //   //  http://localhost:9090/ceto/common/professionTypes
    //   this.$http({
    //     method: "get",
    //     url: "/ceto/common/professionTypes",
    //   }).then(
    //     (res) => {
    //       this.$message.warning(JSON.stringify(res.data));
    //       this.professionTypes = res.data;
    //     },
    //     (error) => {
    //       console.log(" request error : " + error.response.status);
    //     }
    //   );
    // },

    validateNickname(rules, value, callback) {
      if (this.player.nickname.length < 2 || this.player.nickname.length > 10) {
        callback(new Error("昵称在2-10个字符"));
        return;
      }
      callback();
    },
    validateGoldCoin(rules, value, callback) {
      console.log(this.player.goldCoin, typeof this.player.goldCoin);
      console.log(value, typeof value);
      let t = parseInt(this.player.goldCoin);
      if (t < 0 || t > 100) {
        callback(new Error("金额在0-100之间"));
        return;
      }
      callback();
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.el-form {
  width: 350px;
}
</style>
